import { useEffect } from 'react';
import { useAdmins } from "../../../hook/adminsData";
import adminsApi from '../../../api/admins';
import { useHistory } from "react-router-dom";
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Card, Table, message, Popconfirm, Space, Button, } from 'antd'
import { useAdmin } from "../../../hook/getAdmins";

// eslint-disable-next-line
export default () => {
    const history = useHistory()
    const [ , {  getAdminsId }] = useAdmin();
    const [{ rows, total, }, { getAdmins, setCurPage, setEachPage }] = useAdmins();
    useEffect(() => {
        getAdmins()
    }, [getAdmins]
    )
    async function handlDelete(_id) {
        const { status } = await adminsApi.delete({ _id });
        if (status) {
            message.success({
                content: "删除成功！",
                duration: 1,
            });
            getAdmins();
        }
    }

    async function change(_id) {
        await getAdminsId(_id)
        history.push(`/info/updata/${_id}`)

    }
    const columns = [
        {
            title: '姓名',
            dataIndex: 'adminName',
            key: 'adminName',
        },
        {
            title: '密码',
            dataIndex: 'adminPassword',
            key: 'adminPassword',
        },
        {
            title: '电话',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '操作',
            dataIndex: '',
            key: 'x',
            render: (text, record) => {;
                return (
                <Space size="middle">
                    <Popconfirm title="确认删除？" onConfirm={() => {
                        handlDelete(record._id)
                    }} okText="确认"
                        cancelText="取消"
                        icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
                    >
                        <Button>删除</Button>
                    </Popconfirm>

                    <Button value={record._id}
                        onClick={() => {
                            change(record._id)
                        }}
                    >修改</Button>

                </Space>

            )},
        },
    ];



    return (
        <Card >
            <Table
                className="btn"
                rowKey={record => record._id}
                bordered
                dataSource={rows} 
                columns={columns}
                pagination={{
                    total, onChange: (page, pageSize) => {
                        setCurPage(page)
                        setEachPage(pageSize)
                    }
                }} >

            </Table>
        </Card>
    )
}




